<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌主页</title>
    <link rel="stylesheet" href="./element-ui/lib/theme-chalk/index.css" type="text/css">
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }

        body div {
            opacity: 0.96;
        }
    </style>
</head>
<!--style="background: url('img/bg.jpg') no-repeat center fixed;background-size: cover"-->
<body style="background: url('img/bg.jpg') no-repeat center fixed;background-size: cover">
<div id="app">
    <!--头部表单-->
    <el-form :inline="true" :model="brandBug" class="demo-form-inline">
        <el-form-item label="当前状态">
            <el-select v-model="brandBug.status" placeholder="当前状态">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
                <el-option label="" value=""></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="企业名称">
            <el-input v-model="brandBug.companyName" placeholder="企业名称"></el-input>
        </el-form-item>
        <el-form-item label="品牌名称">
            <el-input v-model="brandBug.brandName" placeholder="品牌名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <!--批量删除和新增按钮-->
    <el-button type="danger" plain @click="deleteBrands" :disabled="canNotDelete">批量删除</el-button>
    <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
    <!--表格视图-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    align="center">
            </el-table-column>
            <el-table-column
                    type="index"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="brandName"
                    label="品牌名称"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="companyName"
                    label="企业名称"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="ordered"
                    label="排序"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="statusStr"
                    label="当前状态"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="description"
                    label="备注"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="操作"
                    align="center">
                <template slot-scope="scope">
                    <el-row>
                        <el-button type="primary" @click="getBrandData(scope.row)">修改</el-button>
                        <el-button type="danger" @click="deleteById(scope.row)">删除</el-button>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <!--新增表单-->
    <el-dialog
            title="编辑品牌"
            :visible.sync="dialogVisible"
            width="30%"
            :modal-append-to-body="false">
        <el-form ref="form" :model="brand" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="brand.brandName"></el-input>
            </el-form-item>
            <el-form-item label="公司名称">
                <el-input v-model="brand.companyName"></el-input>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="brand.ordered"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="brand.description"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-switch v-model="brand.status"
                           active-value="1"
                           inactive-value="0"></el-switch>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="addBrand">提交</el-button>
                <el-button @click="dialogVisible = false,brand = {
                            brandName: '',
                            companyName: '',
                            ordered: '',
                            description: '',
                            status: ''
                        }">取消
                </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--修改表单-->
    <el-dialog
            title="修改品牌"
            :visible.sync="updateVisible"
            width="30%"
            :modal-append-to-body="false">
        <el-form ref="form" :model="brand" label-width="80px">
            <el-form-item label="品牌名称">
                <el-input v-model="brand.brandName"></el-input>
            </el-form-item>
            <el-form-item label="公司名称">
                <el-input v-model="brand.companyName"></el-input>
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="brand.ordered"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="brand.description"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-switch v-model="brand.status"
                           :active-value="1"
                           :inactive-value="0"></el-switch>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="updateBrand">提交</el-button>
                <el-button @click="updateVisible = false,brand = {
                            brandName: '',
                            companyName: '',
                            ordered: '',
                            description: '',
                            status: ''
                        }">取消
                </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--分页视图-->
    <div class="block" style="background: white">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5,10,15, 20, 25, 30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount">
        </el-pagination>
    </div>
</div>
</body>
<script src="./js/vue.min.js" type="text/javascript"></script>
<script src="./element-ui/lib/index.js" type="text/javascript"></script>
<script src="./js/axios-0.18.0.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        //页面加载完成后查询所有
        mounted() {
            this.queryAllBrand();
        },
        data() {
            return {
                canNotDelete: true,
                //每页显示条数
                pageSize: 10,
                //总记录条数
                totalCount: 200,
                //当前页码
                currentPage: 1,
                //是否显示新增页面
                dialogVisible: false,
                //是否显示修改页面
                updateVisible: false,
                //头部表单双向绑定数据
                brand: {
                    brandName: '',
                    companyName: '',
                    ordered: '',
                    description: '',
                    status: ''
                },
                //用于解决分页查询bug的问题
                brandBug: {
                    brandName: '',
                    companyName: '',
                    status: ''
                },
                brandBug2: {
                    brandName: '',
                    companyName: '',
                    status: ''
                },
                //批量删除选中的数据
                multipleSelection: [],
                //批量删除的id数组
                deleteIds: [],
                //表格数据
                tableData: []
            }
        },
        methods: {
            //修改数据记录
            updateBrand() {
                this.updateVisible = false;
                axios({
                    method: "post",
                    url: "/brand/updateBrand",
                    data: this.brand
                }).then(resp => {
                    if (resp.data === "success") {
                        this.$message({
                            message: '恭喜你，修改成功',
                            type: 'success'
                        });
                        this.brand = {
                            brandName: '',
                            companyName: '',
                            ordered: '',
                            description: '',
                            status: ''
                        };
                        this.queryAllBrand();
                    }
                })
            },
            //根据id查询从而回显数据
            getBrandData(obj) {
                axios({
                    method: "post",
                    url: "/brand/queryBrandById?id=" + obj.id
                }).then(resp => {
                    this.brand = resp.data;
                    this.updateVisible = true;
                })
                /*this.brand = obj;
                this.updateVisible = true;*/
            },
            //根据id删除
            deleteById(obj) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: "post",
                        url: "/brand/deleteBrandById?id=" + obj.id
                    }).then(resp => {
                        if (resp.data === "success") {
                            this.$message({
                                message: '恭喜你，删除成功',
                                type: 'success'
                            });
                            this.queryAllBrand();
                        }
                    })
                })
            },
            //批量删除方法
            deleteBrands() {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    for (var index in this.multipleSelection) {
                        this.deleteIds[index] = this.multipleSelection[index].id;
                    }
                    axios({
                        method: "post",
                        url: "/brand/deleteBrands",
                        data: this.deleteIds
                    }).then(resp => {
                        if (resp.data === "success") {
                            this.$message({
                                message: '恭喜你，批量删除成功',
                                type: 'success'
                            });
                            this.queryAllBrand();
                        }
                    }).catch(e => {
                        this.$message.error('错了哦，服务器拉垮了');
                    });
                });

            },
            //查询所有方法
            queryAllBrand() {
                //解决bug
                this.brand.brandName = this.brandBug2.brandName;
                this.brand.companyName = this.brandBug2.companyName;
                this.brand.status = this.brandBug2.status;
                //方式一：定义this别名
                /*_this=this;
              axios({
                  method:"get",
                  url:"/brand/queryAllBrand"
              }).then(function (resp) {
                  _this.tableData=resp.data;
              })*/
                //方式二：箭头函数
                axios({
                    method: "post",
                    url: "/brand/queryPageBrandWhere?pageSize=" + this.pageSize + "&currentPage=" + this.currentPage,
                    data: this.brand
                }).then(resp => {
                    this.tableData = resp.data.pageList;
                    this.totalCount = resp.data.totalCount;
                })
            },
            //修改每页显示条数
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.queryAllBrand();
            },
            //修改当前页
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.queryAllBrand();
            },
            //提交添加品牌
            addBrand() {
                this.dialogVisible = false;
                axios({
                    method: "post",
                    url: "/brand/addBrand",
                    data: this.brand
                }).then(resp => {
                    if (resp.data === "success") {
                        this.$message({
                            message: '恭喜你，添加信息成功',
                            type: 'success'
                        });
                        this.brand = {
                            brandName: '',
                            companyName: '',
                            ordered: '',
                            description: '',
                            status: ''
                        };
                        this.queryAllBrand();
                    }
                }).catch(e => {
                    this.$message.error('错了哦，服务器拉垮了');
                });
            },
            //头部表单的提交
            onSubmit() {
                //解决头部表单bug
                this.brandBug2.brandName = this.brandBug.brandName;
                this.brandBug2.companyName = this.brandBug.companyName;
                this.brandBug2.status = this.brandBug.status;

                this.currentPage = 1;
                console.log(this.brand);
                this.queryAllBrand();
            },
            //控制批量删除
            handleSelectionChange(val) {
                this.multipleSelection = val;
                if (this.multipleSelection.length != 0) {
                    this.canNotDelete = false;
                } else {
                    this.canNotDelete = true;
                }
            },
            //表格颜色控制
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 4 === 1) {
                    return 'warning-row';
                } else if (rowIndex % 4 === 3) {
                    return 'success-row';
                }
                return '';
            }
        }
    });
</script>
</html>